<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; overflow:hidden; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>2. Combos and Checkboxes</h1>
   <h2>Attributes and types for selectable popup lists and for clickable checkboxes</h2>

   <center class="Border Border2" id="Border">
      <div style="float:left; margin-right:15px; margin-bottom:20px;">
         <div class="Xml">Source: <a href='02-Combos.xml'>02-Combos.xml</a></div>
         <div class="Main" style='width:756px; height:358px;'>
            <bdo Debug='check' Data_Url='02-Combos.xml'></bdo>
         </div>
      </div>
      <div style="float:left;">
         <div class="Xml">Source: <a href='02-Checkboxes.xml'>02-Checkboxes.xml</a></div>
         <div class="Main" style='width:521px; height:361px; margin-bottom:20px;'>
            <bdo Debug='check' Data_Url='02-Checkboxes.xml'></bdo>
         </div>
      </div>
   </center>

   <ul>
      <li>
         <h3>Enum</h3> type shows <b>combo</b> to select one or more values from popup list, similarly to <b>SELECT</b> html tag. To select more values, set <b>Range</b>='1'. Enum items can contain any HTML code.<br />
         The list of values is defined by <b>Enum</b> attribute. The cell value can be direct value(s) from the list or the index(es) of the value in list or a key(s), if defined list of keys by <b>EnumKeys</b> attribute.<br />
         The Enum and EnumKeys lists can be creates also on demand by custom JavaScript in event <b>OnGetEnum</b> and <b>OnGetEnumKeys</b>. Enum, opposite to defaults, cannot load dynamically from server side.<br />
         The popup menu can show simple list of the defined items, or list of items with checkboxes for Range.
         Or you can show different texts for Enum items by <b>EditEnum</b>.
         Or you can define custom menu by <b>EnumMenu</b>, here you can use all advanced TreeGrid menu features like collapsing levels or submenus.<br />
         The Enum lists in one row can be <b>related</b>, the list in one cell is chosen according to values in other cell(s). Set relation by <b>Related</b> and <b>Clear</b> attributes.
         Relation is for example Continent -> Country -> State -> Region -> City, it means that for selected continent Europe will be listed only european countries in the country combo.<br />
      </li>
      <li>
         <h3>Select</h3> type is <b>simple combo</b> similar to Enum type, with different look. It is shortcut to Type='Html' CanEdit='0' Button='Defaults'.
         It shows list of items to choose one or more of them to the cell. The items can contain any HTML code. The menu supports all TreeGrid menu features like collapsible levels or submenus.
         It is used mostly in Space rows as simple combo.
      </li>
      <li>
         <b>Button</b> <h3>Defaults</h3> shows right side button, with popup list to choose one or more items for the cell. It can be used for any cell Type.
         The cell can be still editable and is possible to input different values than in the list - it differs from Enum type.<br />
         It is set by <b>Button="Defaults"</b> and the list is defined by <b>Defaults</b> attribute. The defaults menu supports all TreeGrid menu features like collapsible levels or submenus.<br />
         In the list can be used various keywords starting by <b>*</b> to show values from other cells - from this column, other column, from only some rows, the most frequent values and so on. It can be done especially in Filter cell.
         The automatic values can be also grouped to submenus according alphabet, when the list is too large.<br />
         It is possible to download dynamically the list from server side (<b>DefaultsServer</b>='1') or to create it on demand by JavaScript in API event <b>OnGetDefaults</b>.<br />
      </li>
      <li>
         <b>Attribute</b> <h3>Suggest</h3> shows a list during typing with items suggested for actual input (like Google suggest input). It can be used for every editable cell type. Can be combined also with Button Defaults.<br />
         The complete list is defined by the <b>Suggest</b> attribute and grid automatically updates the list during typing to show only items that contain (or start by) the typed text.<br />
         There are many options set by <b>SuggestType</b> - when the list will be shown, case-sensitivity, accepting custom items (typed, not selected), automatic completion and so on.<br />
         Suggest is also compatible with <b>Range</b> cells, suggests values for individual parts in the cell range. The Suggest list also supports keywords with <b>*</b> to fill it automatically from other cells like in Defaults list.<br />
         It is possible to download dynamically the list from server side (<b>SuggestServer</b>='1') for actually typed value or to create it on demand by JavaScript in API event, the whole by <b>OnGetSuggest</b> or for actually typed value by <b>OnSuggest</b>.<br />
         It is possible to use Suggest with <b>Format</b> and <b>EditFormat</b> attribute with JSON format to set different value to data and different value to show in cell.<br />
         Suggest attribute permits creating <b><i>combo box</i></b> with search in the list, use such settings: Suggest="..." Button="Defaults" OnClick="Focus,StartEdit" SuggestType="existing,startall,empty,complete"<br />
      </li>
      <li><b>Attribute</b> <h3>Tags</h3> shows <b>Range</b> cell values separated and marked by tags. The tags can be individually deleted by click to "x" (if set <b>Tags</b>="<b>2</b>").<br />
      New tags can be added by editing. The last tag can be deleted by backspace. The <b>Tags</b> are usually used with <b>Suggest</b> to choose the tags from the Suggest list.<br />
      It is possible to wrap the tags to more lines if required (when set <b>Wrap</b>="<b>1</b>" or always one per line when set <b>TagSeparator</b> to LF.<br />
      It is possible to automatically sort the tags ascending, convert them to upper/lower case or delete duplicate tags, it is controlled by <b>TagsType</b> attribute.<br />
      </li>
      <li>
         <h3>Bool</h3> type shows <b>one checkbox</b> in cell. It has two states, checked and unchecked. It can have three states (checked, unchecked, empty) if set <b>CanEmpty</b>="1".<br />
         The Bool cells can be grouped in column by <b>BoolGroup</b> and in row by <b>Radio</b> attribute. Only one Bool cell inside the same group can be checked, checking another unchecks the previous one.<br />
         The groups can also permit or restrict all checkboxes unchecked by <b>Uncheck</b> attribute. There are more predefined or custom icons for the checkboxes chosen by <b>BoolIcon</b>.
      </li>
      <li>
         <h3>Radio</h3> type shows <b>more checkboxes</b> in one cell. The checkboxes are grouped, to permit only one checkbox in the cell checked. If set <b>RadioUncheck</b>="1", permits also all checkboxes to be unchecked.<br />
         The Radio can be used in <b>Range</b> cell, here it checks / unchecks the checkboxes independently, more checkboxes can be checked in one cell. There are more predefined or custom icons for the checkboxes chosen by <b>RadioIcon</b>.<br />
         The Radio lists in one row can be <b>related</b>, similarly to Enum type, the options in one cell are chosen according to values in other cell(s). Set relation by <b>Related</b> and <b>Clear</b> attributes.
         It is even possible to related Radio and Enum types together. Related Radio can be used also in <b>Range</b> cells, the dependent Radio will merge options for all buttons checked in the source Radio cell.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialCells\s*=\s*(\d+)/), TGIndex = 2;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridCells2", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialCells="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>